Mastering React Native, React Native Skia, and Re-animated.

Explore a Figma weather app prototype, test the bottom sheet animation, and observe hourly and weekly forecast visuals for design replication in React Native.

Create your project with yarn or npm, using expo with the blank TypeScript template, and name it weather app. Start the expo server and run the iOS or Android simulator.

Install and configure core packages for the weather app—react navigation, react native skia, reanimated, a bottom sheet, fonts, and blur effects—then set location permissions and start expo.

Create a react native skia canvas, draw a 200 by 200 rectangle with a red-to-green gradient using vec coordinates, and resolve native module errors by building a dev ios build.

Learn to create development builds to resolve library conflicts and integrate custom native code, using config plugins, expo go alternatives, and local compilation for iOS and Android.

Configure Android development for Expo by setting Android SDK location via a local properties file, locating SDK with Android Studio, and running the Android emulator to view a linear gradient.

Set up a clean project structure by creating navigators, screens, components, data, models, and assets folders, organizing static data and interfaces, then prep for building the home screen background component.

Break down the Figma design to build a home background component with a full-screen diagonal linear gradient using a Skia rectangle, responsive to device dimensions via useWindowDimensions.

Set up a linear gradient inside a rectangle by defining start and end vectors that cover the full screen, apply a colors array, and preview on iPhone and Android.

Use React Native's image background component to layer the background and house images above gradient. Wrap the canvas in a fragment and set resize mode to cover with height 100%.

Import the house image from assets/home/house.png into the image background, set width and height to the screen width with resize mode cover, and position it absolutely at top 304.

Switch to percentage-based measurements for a responsive home background across devices, using 36% from 304/844, and apply expo status bar light style so the image extends behind it.

Refactor image styling into a reusable styles object by using the window dimensions hook and a scaled size function to drive the house image style.

Set up a smoke background behind the house by converting the rectangle height to 60% of the screen, positioning a canvas with fill, and drawing a rectangle for a gradient.

Implements layout sizing on Android by switching from window dimensions to application dimensions, adding status bar height and excluding bottom navigation space for consistent home background gradient rendering.

Learn to design a vertical smoke gradient for the home background by configuring a linear gradient in Figma and in code, using rgba colors and precise stop positions.

Draw a line with P1 at width/2,0 and P2 at width/2, smoke height in Skia to verify coordinates; set stroke width ten, then delete the line and design tab bar.

Create a tab bar in react native by pulling arc dimensions from figma, building tab bar.tsx and subcomponents, and using absolute fill to keep the background visible.

Move the weather tab bar to the bottom using absolute positioning, set tab bar height to 88 pixels, and position it with top equal to height minus tab bar height.

Move the weather tab bar to the bottom with absolute positioning, set height to 88 pixels, and use the application dimensions hook to align the arc curve.

Define an arc component with width and height props, render its path on a canvas, and center the curve with a control point using m, q, l, and z.

Place the linear gradient inside the path, set the start and end props, and define two rgb colors with alpha 0.26, adjusting briefly to preview before the stroke border.

Reuse arc path values to implement the tab bar border stroke, creating an arc border path with stroke style, 0.5px width, and RGBA color 117,130,244,0.5, drawing only the top portion.

Create tab bar icons in React Native by exporting SVG from Figma or drawing with Skia, then render white icons on a red background using a canvas and path.

align the tab bar icons with flex row, space-between, and center, using 32 px padding instead of absolute positioning; adjust map icon height to 25 and remove background color.

Design the tab bar middle button with a trapezoid background and a circle button, using React Native Skia, SVG paths, a gradient fill, and a stroke border.

Scale path components to design proportions by computing trapezoid width as width times 0.68 and height as height times 0.12, then use a fit box to scale with React Skia.

Create a circle button for the tab bar with skia, using a linear gradient and inner shadow, sized by the trapezoid width via a radius prop.

Draw a plus sign inside the circle using the radius to place P1 and P2 for the lines, with a four-pixel rounded stroke in color #48319D and size 28.

Wrap the circle button in a Pressable, center it with button center X and absolute fill, switch to trapezoid height, set top to 12, and define normal and oppressed states.

Master the pressable button in a React Native tab bar by wiring a pressed state through the Pressable component, and toggle gradient colors with a ternary operator based on pressed.

Fix the tab bar press issue by resizing the pressable to the circle diameter and removing the background color, completing the tab bar design before proceeding to the weather section.

Explore building the weather section user interface, displaying city, current temperature, condition, and high and low temperatures, and prepare for animations and API integration.

Apply safe area insets to keep a 51-pixel offset below the status bar across devices and notches, and set up Apple fonts for cross-platform use.

Learn to add and load sf pro display thin, regular, and semibold fonts in an expo app using the useFonts hook, and manage splash screen visibility until fonts finish loading.

Expand the weather section by styling three components with SF fonts and colors, then center-align city, temperature, condition, and max/min text before moving to the bottom sheet.

Master the bottom sheet component on the home screen with two snap points (normal and expanded) and draggable interactions, featuring scrollable hourly and weekly forecast tabs, with current time highlighted.

Explore building a draggable bottom sheet in React Native using gesture handler, with snap points at 38.5% and 83%, wiring a forecast sheet into the weather info component within App.tsx.

Set the bottom sheet handle indicator style to width 48, height 5, and color rgba(0,0,0,0.3) to match the segmented control in Figma. The next video covers the background.

Create the forecast sheet background as a transparent bottom sheet with width, height, and a corner radius of 44; compute the snap point at 38.5% height and apply a diagonal gradient.

Apply the Expo Bleu blur view to the bottom tab bar, set intensity 50 and tint dark, and enable overflow hidden for border radius.

Create an inner shadow for a rounded border using a custom path and gradient, drawing arcs with stroke, then apply a linear gradient and label hourly and weekly forecasts.

Design a forecast control in a bottom sheet to toggle hourly and weekly forecasts, with text styled in SF dash semibold and aligned in a row with space-between.

Build a separator line for a segmented control in a bottom tab bar using tsx and canvas, with a shadow, and animate hourly to weekly forecast transitions.

Create the underline layer for the bottom tab bar by measuring the forecast text width with onLayout and animating a gradient line.

Create the forecast capsule to display weather information on the bottom tab. Size it with width, height, and a 30 radius; render a rounded rectangle with inner shadow.

Destructure the date icon, probability, and temperature from the forecast, then render a view with text for the time and date, and an image with probability text.

Format hourly forecast times by exporting convert date to 12 hour format from a date helper, converting 24-hour to 12-hour with am/pm.

Create a horizontally scrolling forecast capsule list with width, height, and radius props, using a forecast scroll component. Map forecasts to capsules in a React Native gesture handler scroll view.

Learn to animate the bottom tab bar opacity in React Native, using capsule and probability opacity variables, ternary logic, and style arrays to show forecast details only when relevant.

Wire an onpress handler for hourly and weekly forecast, manage the selected forecast type with state, and conditionally render the forecast prop between hourly and weekly.

Implement date helpers to get day of week and today flags, wire hourly or weekly formatting, and control capsule opacity in bottom tab bar user interface with bottom sheet widgets.

import and layout the widget components in the forecast sheet using a flex prop, wrap, and a scroll view; arrange the UV index and air quality widgets in two-per-row grids.

Refactor and organize the app by creating a home.tsx file, structuring the file, and importing components while prepping for multiple screens, navigation, and animations under the screens folder.

Learn to animate app components with the reanimated library to run animations on the UI thread, leveraging worklets for smooth visuals and improved performance.

Master basic animations by using shared value, modify styles with use animated style and use animated props, and create animated components with the create animated component function in reanimated.

Build a simple animation that scales a red square to a circle, then back, using a shared scale and border radius with a spring-based, infinite repeat controlled by useEffect.

Animate the border radius with a spring and a dot value, repeating and reversing. Use interpolate to map 0–1 border radius to translateY -300 to 100 during bottom-sheet drag.

Synchronize the background with the bottom sheet by tracking its animated position with a shared value and useAnimatedReaction, then normalize ranges for a cross-device 0–1 open state.

Normalize the bottom sheet position by inverting the y-axis range defined by snap points and device height, mapping 0 to initial and 1 to fully open, using worklets with reanimated.

Replace prop drilling with a React context approach to share the animated position across components using a forecast sheet context, provider, and a use forecast sheet position hook.

Wrap components with the forecast sheet provider and wire the animated position from the use forecast sheet hook to drive the background, then test by dragging the bottom sheet.

Explore animating a React Native image background and canvas using reanimated's animated component, useAnimatedStyle, and interpolate translateY as a bottom sheet expands.

Animate a bottom sheet in React Native by fixing gradient rendering with absolute fill on canvas, clamp extrapolate, and interpolate opacity for smoke effects using Skia and Reanimated.

Fix android gradient interpolation by platform check; use interpolate color on iOS and return color elsewhere, and implement an animated blur view transitioning to #422E5A as the sheet drags.

Animate the tab bar with a custom hook for position, create animated view styles, interpolate 0–1 to move it height plus 20, wrapping content in an animated view.

Animate the weather section in the bottom sheet using React Native animations, including animated view and animated text, with interpolated y positions, font size, color, and font family.

Learn to position temperature and condition on a single line with a separator, using animated styles to control opacity, layout, and transitions during drag in React Native.

Learn to wire a forecast press callback and animate a line along the x axis using use shared value, with timing and an animated canvas in React Native.

Learn to implement forecast animations by rendering hourly and weekly components, animating their translateX with shared values, and syncing transitions when the segment control selects hourly or weekly.

Learn to wire up navigation with a Stack Navigator, create routes for home and the Weather List screen, and use navigation hooks and a pressable icon to navigate between pages.

Reorder the route navigator so the list screen opens first to prevent state resets on refresh, and create a shared background gradient component applied to home and weather list.

Learn to build a detail page header in React Native by structuring a safe-area aware header with a gradient background, a search bar, and left/right icons wired to navigation.

Create a search bar for the details page by layering a diagonal gradient rounded rectangle with an inner shadow, plus a row with a search icon and input.

Convert a Figma path into a React Native Skia weather widget using Canvas, calculate widget width and height, apply a vertical linear gradient, and prepare for press animation.

Practice implementing an animated path in React Native by converting an svg string to a Skia path, wrapping the canvas in the Pressable component, and toggling progress with timing.

Create a weather details page by building a weather widget with forecast props, destructuring temperature, high, low, location, icon, and weather from the first forecast item, then render icons.

Rotate the weather image by two degrees using the animated image component and interpolate with a 0–1 progress value. Then reorder the route navigator to place home screen first.

Transform home page from static to dynamic data by wiring the left tab bar icon, requesting location permissions, and fetching US weather data via an API to update the screen.

Review the weather service file, set up the api key from tomorrow io, and use fetch all to retrieve current, hourly, and weekly weather data for the scroll view.

Create a weather data context to share weather data across components, mirroring the forecast sheet context. Define a weather provider using useState to manage current, hourly, and weekly weather data.

wrap the app with a weather data provider and use the useWeatherData hook to destructure and replace current weather with weather data, then update hourly and weekly forecasts.

Destructure hourly and weekly forecast from the weather data hook, extract both forecasts, and replace them with their respective names to ensure correct assignment. Prepare for the next video on getting the location.

Fetch location coordinates, retrieve weather data via a weather service, and update the weather state using a hook; demos include Apple and Google HQ and potential UI enhancements.